<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i>消息通知</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title" @click="handleDetail(scope.$index, scope.row)">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" width="180"></el-table-column>
                        <el-table-column width="100">
                            <template slot-scope="scope">
                            <el-popover
                                    placement="top-start"
                                    title="内容:"
                                    width="200"
                                    trigger="hover">{{scope.row.content}}
                                <el-button slot="reference">详情</el-button>
                            </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.$index,scope.row)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleReadAll">全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleDelAll">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.$index,scope.row)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleDeleteAll">清空回收站</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {
        deleByIds,
        readByIds,
        cycleByIds,
        reduction,
        markCycle,
        markRead,
        getUnreadList,
        getReadList,
        getRecycleList,
        delMsgByIds
    } from "../../api/admin";

    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [{
                    title: '',
                    sendTime: '',
                    content:''
                }],
                read: [{
                    title: '',
                    sendTime: ''
                }],
                recycle: [{
                    title: '',
                    sendTime: ''
                }],
                query: {
                    userid:''
                },
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                let user1 = JSON.parse(localStorage.getItem('user'));
                this.query.userid=user1.userid;
                getUnreadList(this.query).then(res => {
                    if (!res.data){
                        console.log('未读为空');
                        this.unread.length=0;
                        this.unread.splice(1);
                    }else{
                        console.log(res.data);
                        this.unread=res.data;
                    }
                });
                getReadList(this.query).then(res => {
                    if (!res.data){
                        console.log('已读为空');
                        this.read.length=0;
                        this.read.splice(1);
                    }else{
                        console.log(res.data);
                        this.read=res.data;
                    }
                });
                getRecycleList(this.query).then(res => {

                    if (!res.data){
                        console.log('回收站为空');
                        this.recycle.length=0;
                        this.recycle.splice(1);
                    }else{
                        console.log(res.data);
                        this.recycle=res.data;
                    }
                });
            },
            handleRead(index,row) {
                const item = this.unread.splice(index, 1);
                console.log(item);
                console.log(row);
                markRead(row).then(res => {
                    console.log(res);
                    this.read = item.concat(this.read);
                    location.reload();
                });
            },
            handleDetail(index,row) {
                const item = this.unread.splice(index, 1);
                console.log(item);
                console.log(row);
                this.read = item.concat(this.read);
            },
            handleDel(index,row) {
                const item = this.read.splice(index, 1);
                markCycle(row).then(res => {
                    console.log(res);
                    this.recycle = item.concat(this.recycle);
                });
            },
            handleRestore(index,row) {
                const item = this.recycle.splice(index, 1);
                reduction(row).then(res => {
                    console.log(res);
                    this.read = item.concat(this.read);
                });
            },
            handleReadAll(){
                let ids = new Array();
                for (let i = 0; i <this.unread.length; i++) {
                    ids.push(this.unread[i].msgid);
                }
                console.log(ids);
                readByIds(ids).then((res) => {
                    if(res.state == 2000){
                        this.$message.success('全部已读');
                       // this.getData();
                        location.reload();
                    } else {
                        this.$message.error(res.message);
                    }
                })
            },
            handleDeleteAll(){
                let ids = new Array();
                for (let i = 0; i <this.recycle.length; i++) {
                    ids.push(this.recycle[i].msgid);
                }
                console.log(ids);
                deleByIds(ids).then((res) => {
                    if(res.state == 2000){
                        this.$message.success('删除成功');
                        this.getData();
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }
            ,
            handleDelAll(){
                let ids = new Array();
                for (let i = 0; i <this.read.length; i++) {
                    ids.push(this.read[i].msgid);
                }
                console.log(ids);
                cycleByIds(ids).then((res) => {
                    if(res.state == 2000){
                        this.$message.success('删除成功');
                        this.getData();
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
    .message-title{
        cursor: pointer;
    }
    .handle-row{
        margin-top: 30px;
    }
</style>

